Very cool!

Thanks 🙏 The effect is cool but the loading times are increased fairly much on my watch 🫤

I suppose it's just a matter of personal preference - I like having the watch animate when loading, even if it costs me a 1-2 seconds of loading time. Hopefully everyone can at least try it out to see what they think...

On the latest cutting edge firmwares I actually implemented something that could really help here. It's a timer that allows you to execute JS while the app is executing other JS.

So if you add some code like this into loadscr.0.boot.js:

{
  let timer;
  try { timer = require("timer"); } catch { print("loadscr: need FW 2v29+"); }
  if (timer) {
    let o = Graphics.createArrayBuffer(g.getWidth(),g.getHeight(),1);
    let n = 10, gl = g;
    o.transparent = 1;
    o.palette = new Uint16Array(2);//all black
    o.fillCircle(88,88,n);
    Bangle.setLCDOverlay(o,0,0,{id:"loadscr"});
    gl.clear(1).flip(1);
    let id = timer.add({
      type:"EXEC", fn: () => { "ram";
        n+=10;
        if (n>170) done();
        else {
          o.fillCircle(88,88,n);
          gl.flip(1);
        }
      },
      time:100,
      interval:100,
    });
    let done = function() {
      console.log("Done");
      if (id===undefined) return;
      require("timer").remove(id);
      id = undefined;
      Bangle.setLCDOverlay(undefined, {id: "loadscr"});
    };
    setTimeout(done, 0);
  }
}

You'll actually end up with an animation of a circle that increases and shows the app while it is loading - it won't slow the loading of the new app down anywhere near as much (basically only what's required to update the screen).

Similarly this one takes a screenshot of the screen and scrolls it off:

{
  let timer;
  try { timer = require("timer"); } catch { print("loadscr: need FW 2v29+"); }
  if (timer) {
    let o = g.asImage();
    g.clear();
    let n = 10, gl = g;
    Bangle.setLCDOverlay(o,n,0,{id:"loadscr"});
    gl.flip(1);
    let id = timer.add({
      type:"EXEC", fn: () => {"ram"
        n+=10;
        if (n>170) done();
        else {
          Bangle.setLCDOverlay(o,n,0,{id:"loadscr"});
          gl.flip(1);
        }
      },
      time:100,
      interval:100,
    });
    let done = function() {
      console.log("Done");
      if (id===undefined) return;
      require("timer").remove(id);
      id = undefined;
      Bangle.setLCDOverlay(undefined, {id: "loadscr"});
    };
    setTimeout(done, 0);
  }
}

So I'd rather not put your code in, but instead do something using this new feature.

I'll commit a new app in a few minutes

Oh wow, that looks really good! I'll play around with this and see what I can do! Thanks!

I've just pushed an app (sorry, I stole your loadanim name) that contains 3 different animations.

It should be pretty easy to add your own animations into that. My favourite is the 'progress' one.

It's worth noting:

• fullscreen overlays are pretty slow (it's the height that matters, not the width) so actually if you can animate something like a progress bar that'll be much faster
• Bangle.js looks for a file called .loading when loading an app and if it finds it it'll display that before doing anything else. The Progress animation uses that to display the Loading... text right at the start - and I think you could do some neat things using that.

• so actually if you can animate something like a progress bar that'll be much faster

Makes me think of a progress bar-like animation I want to try (if no one else is quicker to it): A thin line that zips across right to left from the HW button at the middle of the screen. Then maybe it bounces back like a yo-yo (maybe it even has a circle at the end for the yo-yo style to be complete!) I imagine that way it connects very much with the action of pressing the button.